import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList, TouchableOpacity,DeviceEventEmitter
} from 'react-native';
import Swiper from 'react-native-swiper';
import { MarqueeHorizontal, MarqueeVertical } from 'react-native-marquee-ab';
//引入
import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view';
import OLists from './OLists';
import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Football from "../../utils/Football";
import Utils from "../../utils/Utils";

import Styles from './Styles';
const { width, height } = Dimensions.get('window')
import RootSiblings from 'react-native-root-siblings';

var id = 0;
var elements = [];
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabShow: false,
            label: ['购买', '跟单'],
            single_type:{},
            curr_single_type: { id: 0, data: '所有彩种' },

            orderState:-1, //-1全部0,未接单，1已接单，未打票 2已打票（通过IsTake 代表已经取票），3已撤单，4未中奖 5已中奖 6已拍奖
            days:0,//0全部   7，30，60

        };
    }
    static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        let curr_single_type_id = navigation.getParam('curr_single_type_id');
        let curr_single_type_data = navigation.getParam('curr_single_type_data');
        return {
            headerTitle: () => (
                <View style={Styles.header}>
                    <View></View>
                    <TouchableOpacity onPress={navigation.getParam('show_single_type')}>
                        <View style={Styles.header_title}>
                            <Text style={{ color: '#ffffff' }}>{curr_single_type_data}</Text>
                            <Image resizeMode="cover" style={{ width: 12, height: 14 }} source={require('../../image/js_img_nav_arrows.png')} />
                        </View>
                    </TouchableOpacity>
                    <View></View>
                </View>
            ),
            headerStyle: {
                backgroundColor: '#d0162e',
                paddingTop: 18
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                //fontWeight: 'bold',
            },
        };
    };
    componentDidMount() {
        let curr_single_type = this.state.curr_single_type;
        this.props.navigation.setParams({ curr_single_type_id: curr_single_type.id });
        this.props.navigation.setParams({ curr_single_type_data: curr_single_type.data });
        this.props.navigation.setParams({ show_single_type: this.show_single_type });

        let single_type = this.state.single_type;
        single_type[0]='所有彩种';
        for(let key in Ugame.gmlist){
            single_type[key]=Ugame.gmlist[key].Name
        }
        setTimeout(() => {
            this.setState({
                tabShow: true,
                single_type:single_type
            });
        }, 0)
    }
    show_single_type = () => {
        if (elements.length == 0) {
            let sibling = new RootSiblings(this._show_single_type_model());
            id++;
            elements.push(sibling);
        } else {
            this.destroySibling();
        }
    };
    _show_single_type_model = () => {
        let { single_type, curr_single_type } = this.state;
        return (
            <TouchableOpacity style={Styles.sibling} onPress={this.destroySibling}>
                <View style={Styles.cate_menu}>
                    <View style={Styles.cate_list}>
                        {this.renderSingleType()}
                    </View>
                </View>
            </TouchableOpacity >
        );
    }
    destroySibling = () => {
        let lastSibling = elements.pop();
        lastSibling && lastSibling.destroy();
    };
    renderSingleType() {
        let { single_type, curr_single_type } = this.state;
        var itemArr = [];
        for(let key in single_type){
            let data = single_type[key];
            itemArr.push(
                <TouchableOpacity key={key} onPress={() => this.change_single_type(key,data)}>
                    <View >
                        <Text style={data == curr_single_type.data ? Styles.cate_item_on : Styles.cate_item}>{data}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    change_single_type = (index, data) => {
        this.props.navigation.setParams({ curr_single_type_id: index });
        this.props.navigation.setParams({ curr_single_type_data: data });
        this.destroySibling();
        this.setState({
            curr_single_type: {
                id: index,
                data: data
            }
        },()=>{
            //过滤数据
            DeviceEventEmitter.emit('updateOLists',{
                gid:index,
                orderState:this.state.orderState,
                days:this.state.days
            });
            //end
        });
    }

    renderScrollableTab=()=>{
        let {label,orderState,days} = this.state;
        let gid = this.state.curr_single_type.id;        
        if (this.state.tabShow){
            return (
                <ScrollableTabView
                    style={{paddingTop: 8}}
                    renderTabBar={() =>
                        <ScrollableTabBar
                            style={{height:35}}
                            tabStyle={{height:35}}
                        />
                    }
                    tabBarBackgroundColor='#fff'
                    tabBarActiveTextColor='#b4282d'
                    tabBarInactiveTextColor='#333'
                    tabBarUnderlineStyle={Styles.tabBarUnderlines}
                >
                    {                        
                        label.map((item, index) => {                            
                            return <OLists navigation={this.props.navigation} tabLabel={item} key={++index} gid={gid} orderState={orderState}  days={days}/>;
                        })
                    }
                </ScrollableTabView>
            )
        }
    }

    render() {
        return (
            <View style={Styles.container}>
                {this.renderScrollableTab()}
            </View>
        )
    }
}


